<template>
  <div class="kill">
    <div class="kill-title">
      <span>坤坤秒杀</span>
      <span>{{h2}}点整场</span>
      <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
      <span>爆款轮番秒</span>
    </div>
    <van-grid :column-num="size">
      <van-grid-item v-for="item in secondGoodsData" :key="item.proid" :icon="item.img1">
        <!-- 添加图片下面的价格 -->
        <template #text>
          <span style="color: red; font-size: 12px">¥ {{ item.originprice }}</span>
        </template>
      </van-grid-item>

    </van-grid>
  </div>
</template>

<script setup lang="ts">
// 结构
import { secondKillAPI } from "../../../api/goods"
import { reactive, ref } from "vue";
// 接口泛型
import type { IGoods } from "../../../utils/type"


const time = ref(30 * 60 * 60 * 1000);
let size = ref<number>(0)
let secondGoodsData: Array<IGoods> = reactive<Array<IGoods>>([])

secondKillAPI({
  // 携带的参数
  count: 1,
  limitNum: 6,
}).then((res) => {
  // console.log(res);
  if (res.data.code == 200) {
    // ...展开运算符 把里面的值附进去
    secondGoodsData.push(...res.data.data);

    size.value = secondGoodsData.length;
  }
})



// 倒计时区域

// 计算秒杀的时间
let start = new Date()
let h = start.getHours()
let h2 = h % 2 == 0 ? h + 2 : h + 1
// 重新获取时间
let end = new Date()
// 设置结束小时
end.setHours(h2)
// 设置结束分钟
end.setMinutes(0)
end.setSeconds(0);
end.setMilliseconds(0);
time.value = end.getTime() - start.getTime();
</script>

<style scoped lang="less">
.kill {
  display: flex;
  flex-direction: column;
  padding: 10px 5px;
  margin: 10px 0;
  width: 100%;
  border-radius: 10px;
  background-color: #fff;

  .kill-title {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }

  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #f4a;
  }

  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #f4a;
  }
}
</style>